<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>LiteChat_Frame（轻聊天气泡框架）</title>
  <link rel="stylesheet" type="text/css" href="css/litewebchat.min.css" />
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<style>
html,body{
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>
<body>
<p>【userId】：<div><input id="userId" name="userId" type="text" value="10"></div>
<p>【toUserId】：<div><input id="toUserId" name="toUserId" type="text" value="20"></div>
<p>【toMessage】：<div><input id="contentText" name="contentText" type="text" value="hello websocket"></div>
<p>【操作】：<div><a onclick="openSocket()">开启socket</a></div>
<p>【操作】：<div><a onclick="sendMessage()">发送消息</a></div>
    <!-- 主容器 -->
    <div class="lite-chatbox"> 

    <!-- cleft 左 -->
    <div class="cleft cmsg">
        <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;" src="./img/A.jpg" />
        <span class="name">chenjunyu19</span>
        <span class="content">这是什么什么鬼？</span>
    </div>

    <!-- cright 右 -->
    <div class="cright cmsg">
        <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="./img/B.jpg" />
        <span class="name">SuperPaxxs</span>
        <span class="content">LiteChat_Frame（轻聊天气泡框架），一个贼简洁 <del>(简单)</del> 、美观、易用的 HTML 聊天界面框架</span>
    </div>

    <div class="cright cmsg">
        <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="./img/B.jpg" />
        <span class="name">SuperPaxxs</span>
        <span class="content">它简洁而不简单，能使你开发聊天界面更快速</span>
    </div>
	
    <div class="cleft cmsg">
        <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="./img/A.jpg" />
        <span class="name">chenjunyu19</span>
        <span class="content">直接说，气泡是谁的？</span>
    </div>
    
    <div class="cright cmsg">
        <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="./img/B.jpg" />
        <span class="name">SuperPaxxs</span>
        <span class="content">好吧，气泡css来自 <a href="http://i.intas.cn/" target="_blank">Haswikr的Blog</a> 的机器人气泡，我给白色的加了点边框 😝 </span>
    </div>

    <div class="cleft cmsg">
        <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="./img/H.jpg" />
        <span class="name"><span class="htitle admin">admin</span>Haswikr</span>
        <span class="content">当初调色煞费苦心</span>
    </div>

    <div class="cleft cmsg">
        <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="./img/O.jpg" />
        <span class="name"><span class="htitle owner">owner</span>Sonui</span>
        <span class="content">这设计真棒</span>
    </div>
    
    <div class="cleft cmsg">
        <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="./img/A.jpg" />
        <span class="name"><span class="htitle">menber123456789789</span>chenjunyu19</span>
        <span class="content">那咋用啊？</span>
    </div>
    
    <div class="cright cmsg">
        <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="./img/B.jpg" />
        <span class="name">SuperPaxxs</span>
        <span class="content">
            <del>诶哟少年你找对人了</del><br><br>
            如果只是使用，那非常简单。<br>
            <h2>使用指北</h2>
            1.引用css： litechat.css<br><br>
            &lt;link type=&quot;text/css&quot; href=&quot;//lab.morfans.cn/LiteWebChat_Frame/litewebchat.css&quot; rel=&quot;stylesheet&quot; /&gt;
            <br>或<br>
            &lt;link type=&quot;text/css&quot; href=&quot;//lab.morfans.cn/LiteWebChat_Frame/litewebchat.min.css&quot; rel=&quot;stylesheet&quot; /&gt;<br><br>
            2.创建一个 DIV ，用来容纳聊天对话，目的是不让 css 干扰页面其他内容：<br><br>
            &lt;div class=&quot;lite-chatbox&quot;&gt; <br>
            ...<br>
            &lt;/div&gt;<br><br>           
            话说你就不会看下源码吗...<b>楼下就是特性演示</b>
        </span>
    </div>
	
	<div class="tips">
        <span>Chenjunyu19 退出了聊天室并撩了你一把</span>
    </div>
	<div class="cleft cmsg">
        <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="./img/A.jpg" />
        <span class="name">空消息测试1</span>
        <span class="content"></span>
    </div>
        
    <div class="cright cmsg">
        <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="./img/B.jpg" />
        <span class="name">空消息测试2</span>
        <span class="content">&nbsp;</span>
    </div>
    <div class="cleft cmsg">
        <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="./img/A.jpg" />
        <span class="name">chenjunyu19</span>
        <span class="content">注意，上面两条空消息的消息内容代码不一样</span>
    </div>

    <div class="cright cmsg">
        <img class="headIcon" ondragstart="return false;"  oncontextmenu="return false;"  src="./img/B.jpg" />
        <span class="name">SuperPaxxs</span>
        <span class="content">头像换成方形请去掉 radius </span>
    </div>

    <div class="cleft cmsg">
        <img class="headIcon" ondragstart="return false;"  oncontextmenu="return false;"  src="./img/A.jpg" />
        <span class="name">chenjunyu19</span>
        <span class="content">我是左边的方形头像</span>
    </div>

    <div class="cright cmsg">
        <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="./img/B.jpg" />
        <span class="name">图片消息</span>
        <span class="content"><img src="./img/img2.png"></span>
    </div>

    <div class="cleft cmsg">
        <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="./img/A.jpg" />
        <span class="name">图片消息2</span>
        <span class="content"><img src="./img/img.png"><br>
         图片带文字是可以的 <del>（废话）</del></span>
    </div>

    <div class="cright cmsg">
        <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="./img/B.jpg" />
        <span class="name">右边长消息</span>
        <span class="content">我的消息真的超级长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长欸</span>
    </div>

    <div class="cleft cmsg">
        <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="./img/A.jpg" />
        <span class="name">左边长消息</span>
        <span class="content">这么巧鸭，我的也超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超超级长的欸</span>
    </div>
	
    <div class="tips">
        <span class="tips-danger">系统消息：左/右边长消息被管理员批判一番……</span>
    </div>

    <div class="tips">
        <span>系统消息：normal</span>
    </div>
    
    <div class="tips">
        <span class="tips-primary">系统消息：primary</span>
    </div>
    
    <div class="tips">
        <span class="tips-success">系统消息：success</span>
    </div>
    
    <div class="tips">
        <span class="tips-info">系统消息：info</span>
    </div>
    
    <div class="tips">
        <span class="tips-warning">系统消息：warning</span>
    </div>
    
    <div class="tips">
        <span class="tips-danger">系统消息：danger</span>
    </div>


	
    <div class="cright cmsg">
        <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="./img/B.jpg" />
        <span class="name">带有超链接的消息测试</span>
        <span class="content">当然是可以有超链接的。例子在这里：<br><a href="http://morfans.cn" target="_blank">你敢点我吗</a> ← 戳这里</span>
    </div>
	
	<div class="cleft cmsg">
        <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="./img/A.jpg" />
        <span class="name">全符号测试</span>
        <span class="content">。，；？：！‘’“”@ˆ.,;?:!&#x27;&quot;〝〞﹫ˇ</span>
    </div>

	<div class="cleft cmsg">
        <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="./img/A.jpg" />
        <span class="name">全emoji测试</span>
        <span class="content">😀😝🐂🍺</span>
    </div>
    
    <div class="cright cmsg">
        <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="./img/B.jpg" />
        <span class="name">&nbsp;</span>
        <span class="content">当无昵时候需要 &amp;nbsp; 填充</span>
    </div>

    <div class="cright cmsg">
        <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="./img/B.jpg" />
        <span class="name">SuperPaxxs</span>
        <span class="content">换行用 &lt;br&gt; ，HTML 你懂的..</span>
    </div>

    <div class="cleft cmsg">
        <img class="headIcon radius" ondragstart="return false;"  oncontextmenu="return false;"  src="./img/A.jpg" />
        <span class="name">chenjunyu19</span>
        <span class="content">以上就是全部的特性，以后有空再更</span>
    </div>
        
</body>
<script>
    var socket;
    function openSocket() {
        if(typeof(WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        }else{
            console.log("您的浏览器支持WebSocket");
            //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
            //等同于socket = new WebSocket("ws://localhost:8888/xxxx/im/25");
            //var socketUrl="${request.contextPath}/im/"+$("#userId").val();
            var socketUrl="https://prehealth.top/pre2.0/imserver/"+$("#userId").val();
            socketUrl=socketUrl.replace("https","ws").replace("http","ws");
            console.log(socketUrl);
            if(socket!=null){
                socket.close();
                socket=null;
            }
            socket = new WebSocket(socketUrl);
            //打开事件
            socket.onopen = function() {
                console.log("websocket已打开");
                //socket.send("这是来自客户端的消息" + location.href + new Date());
            };
            //获得消息事件
            socket.onmessage = function(msg) {
                console.log(msg.data);
                //发现消息进入    开始处理前端触发逻辑
            };
            //关闭事件
            socket.onclose = function() {
                console.log("websocket已关闭");
            };
            //发生了错误事件
            socket.onerror = function() {
                console.log("websocket发生了错误");
            }
        }
    }
    function sendMessage() {
        if(typeof(WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        }else {
            console.log("您的浏览器支持WebSocket");
            console.log('{"toUserId":"'+$("#toUserId").val()+'","contentText":"'+$("#contentText").val()+'"}');
            socket.send('{"toUserId":"'+$("#toUserId").val()+'","contentText":"'+$("#contentText").val()+'"}');
        }
    }
</script>
</html>